<template>
    <div class="app-container">
      <el-tabs v-model="activeName" >
        <el-tab-pane :key="key" :label="value" :name="key" v-for="(value, key) in $msg('mold')" />
      </el-tabs>
      
      <el-row class="body" v-if="activeName=='0'">
        <draggable v-model="dataList" :options="{ animation: 60 }" @update="datadragEnd">
          <el-col v-for="(item, index) in dataList" :key="index" :span="6" class="body-item">
            <el-image :src="item.url" />
            <div class="body-item-bottom">
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
            </div>
          </el-col>
        </draggable>
      </el-row>
      
      <div class="btn" v-if="activeName=='0'">
        <el-upload
          ref="upload"
          :action="upload.action"
          :limit="upload.limit"
          :accept="upload.accept"
          :file-list="fileList"
          :on-error="onError"
          :on-exceed="onExceed"
          :http-request="httpRequest"
          :show-file-list="false"
          :auto-upload="true">
          <el-button size="small" type="warning" icon="el-icon-upload" @click="submitUpload">上传</el-button>
        </el-upload>
      </div>
      <el-button 
        v-if="activeName=='1'" 
        type="primary" 
        icon="el-icon-plus" 
        size="mini" 
        style="margin-bottom: 20px;"
        @click="handleAdd"
        >新增</el-button>
      <el-table
        :data="noticeList"
        v-if="activeName=='1'"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
            type="index"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="通知内容">
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          width="300"
          label="创建时间">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)" plain>编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-table
        :data="prizeList"
        v-if="activeName=='2'"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
            type="index"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="抽奖规则">
        </el-table-column>
        <el-table-column
          prop="number"
          align="center"
          label="抽奖点">
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          width="300"
          label="创建时间">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handlePrizeEdit(scope.$index, scope.row)" plain>编辑</el-button>
                <!-- <el-button
                  size="mini"
                  type="danger"
                  @click="handlePrizeDelete(scope.$index, scope.row)" plain>删除</el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="修改通知内容" :visible.sync="open" width="600px" :close-on-click-modal="false">
        <el-form ref="form" :model="selectNotice" label-width="80px">
          <el-form-item label="通知内容">
            <el-input type="textarea" v-model="selectNotice.title"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="新增通知" :visible.sync="addOpen" width="600px" :close-on-click-modal="false">
        <el-form ref="form" :model="notice" label-width="80px">
          <el-form-item label="通知内容">
            <el-input type="textarea" v-model="notice.title"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAddSubmit">确认</el-button>
            <el-button @click="onAddCancel">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="修改抽奖规则" :visible.sync="prizeOpen" width="600px" :close-on-click-modal="false">
        <el-form ref="form" :model="selectPrize" label-width="80px">
          <el-form-item label="通知内容">
            <el-input type="textarea" v-model="selectPrize.title"></el-input>
          </el-form-item>
          <el-form-item label="抽奖点">
            <el-input type="textarea" v-model="selectPrize.number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onPrizeSubmit">确认</el-button>
            <el-button @click="onPrizeCancel">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    </div>
  </template>
  <script>
  import draggable from 'vuedraggable'
  import { listFile, uploadFile, updateSort, delFile, addNotice, editNotice } from '@/api/swiper'
  export default {
   components: {
      draggable
    },
    data() {
      return {
        activeName: '0',
        dataList: [],
        srcList: [],
        upload: {
          action: '',
          accept: '.jpg, .jpeg, .png',
          limit: 10
        },
        fileList: [],
        noticeList: [],
        prizeList: [],
        loading: false,
        open: false,
        prizeOpen: false,
        addOpen: false,
        selectNotice: {
            title: "",
            id: ""
        },
        notice: {
            title: "",
            type: "1"
        },
        selectPrize: {
          title: "",
          number: "",
          type: "2"
        },
        prize: {
          title: "",
          number: "",
          type: "2"
        }
      }
    },
    watch: {
      activeName: {
        handler(val) {
           this.getList()
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      // 排序
      datadragEnd(evt) {
        evt.preventDefault()
  
        const imageList = this.dataList.map((item, index) => {
          return Object.assign({}, {
            id: item.id,
            number: index + 1
          })
        })
  
         updateSort({
          imageList: JSON.stringify(imageList)
        }).then(() => {})
      },
      // 删除
      handleDelete(row) {
        this.$confirm('是否确认删除该张图片?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return delFile(row.id)
        }).then(() => {
          this.msgSuccess("删除成功")
          this.getList()
        }).catch(() => {})
      },
      // 查询
      async getList() {
        try {
            this.loading = true
          const res = await listFile({ type: this.activeName })
          this.loading = false
          if (this.activeName == '0') {
            this.dataList = res.data
            this.srcList = res.data.map(item => item.url)
          } 
          if (this.activeName == '1'){
            this.noticeList = res.data
          }
          if (this.activeName == '2') {
            this.prizeList = res.data
          }
          
        } catch (err) {
          this.dataList = []
          this.srcList = []
          this.noticeList = []
        }
      },
      // 上传
      submitUpload() {
        if (this.fileList.length <= 0) {
          return false
        }
        this.$refs.upload.submit()
      },
      /* 上传失败 */
      onError() {
        this.$message({
          message: '上传失败, 请重试',
          type: 'error'
        })
      },
      /* 文件个数超出 */
      onExceed() {
        this.$message({
          message: `只允许上传${this.upload.limit}个文件`,
          type: 'warning'
        })
      },
      /** 调用接口上传 */
      httpRequest(param) {
        let formData = new FormData()
  
        formData.append('image', param.file)
        formData.append('advertise', JSON.stringify({
          type: this.activeName
        }))
  
        uploadFile(formData).then(() => {
          this.msgSuccess("上传成功")
          this.getList()
        })
      },

    //   通知
      handleAdd() {
        this.addOpen = true
      },
      onAddCancel() {
        this.addOpen = false
      },
      onAddSubmit() {
        if(this.notice.title == "") {
            this.$message({
                  message: `请填写内容`,
                  type: 'warning'
                })
                return
        }
        addNotice(this.notice).then(res => {
            if(res.code === 200) {
                this.$message({
                  message: `新增成功`,
                  type: 'success'
                })
                this.notice.title = ""
                this.getList()
            } else {
                this.$message({
                  message: `新增失败`,
                  type: 'error'
                })
            }
            this.onAddCancel()
        })
      },
      handleEdit(e, row) {
        this.selectNotice.title = row.title
        this.selectNotice.id = row.id
        this.open = true
      },
      handleDelete(e, row) {
        const id = row.id
        this.$confirm('确定删除改通知?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            delFile(id).then(res => {
                if(res.code === 200) {
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.getList()
                }
            })
        }).catch(() => {        
        });
        
      },
      onCancel() {
        this.open = false
      },
      onSubmit() {
        editNotice(this.selectNotice).then(res => {
            if(res.code === 200) {
                this.getList()
            } else {
                this.$message({
                  message: `修改失败`,
                  type: 'error'
                })
            }
            this.onCancel()
        })
      },
      handlePrizeEdit(e, row) {
        this.selectPrize.title = row.title
        this.selectPrize.number = row.number
        this.selectPrize.id = row.id
        this.prizeOpen = true
      },
      handlePrizeDelete() {

      },
      onPrizeCancel() {
        this.prizeOpen = false
      },
      onPrizeSubmit() {
        editNotice(this.selectPrize).then(res => {
            if(res.code === 200) {
                this.getList()
            } else {
                this.$message({
                  message: `修改失败`,
                  type: 'error'
                })
            }
            this.onPrizeCancel()
        })
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .body {
    width: 100%;
  
    .body-item {
      padding: 10px;
      text-align: center;
  
      .el-image {
        width: 200px;
        height: 200px;
      }
      .body-item-img {
        cursor: pointer;
      }
      .body-item-bottom {
        width: calc(100% - 20px);
        text-align: center;
  
        .body-item-bottom-text {
          padding: 8px 0;
        }
      }
    }
  }
  .btn {
    width: 100%;
    margin: 50px 0 0;
    display: flex;
    justify-content: center;
    
    .el-button {
      margin: 0 20px;
    }
  }
  .btn /deep/ .el-upload {
    display: inline-block !important;
  }
  </style>
  